<template>
  <div class="popup">
    <div class="popup-header">
      <div class="popup-header-icon">
        <img :src="bg" alt="">
        <span class="icon icon-err"></span>
      </div>
    </div>
    <div class="popup-content border-1px">
      <slot>
        <p>{{ text }}</p>      
      </slot>
    </div>
    <div class="popup-footer">
      <div v-if="type === 'alert'" @click="positive">
        <p>确定</p>
      </div>
      <ul v-else>
        <li @click="negtive">{{ footer_left }}</li>
        <li class="vertical-1px"></li>
        <li @click="positive">{{ footer_right }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      text: {
        type: String,
        default: '需配置文本需配置文本需配置文本需配置文本需配置文本需配置文本'
      },
      type: {
        type: String,
        default: ''
      },
      footer_left: {
        type: String,
        default: '取消'
      },
      footer_right: {
        type: String,
        default: '确定'
      }
    },
    data () {
      return {
        bg: require('assets/tanchuang_bg.png')
      }
    },
    methods: {
      negtive () {
        this.$emit('negtive')
      },
      positive () {
        this.$emit('positive')
      }
    }
  }
</script>

<style lang='scss'>
  @import '../../common/scss/tool.scss';
  @import '../../common/scss/_variable.scss';

  .popup {
    width: 100%;
    min-width: 300px;
    z-index: $zIndex-10--tabBar;
    background: $base-fff;
    border-radius: 10px;
    &-header {
      position: relative;
      left: 0;
      top: 0;
      height: 130px;
      text-align: center;
      &-icon {
        position: absolute;
        left: 50%;
        transform: translate(-50%, -40%);
        img {
          width: 310px;
        }
        .icon {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-30%, -100%);
          font-size: 40px;
          color: $base-fff;
        }
      }    
    }
    &-content {
      padding: 30px 60px 60px 60px;
      p {   
        font-size: 30px;
        line-height: 50px;
        color: $base-666;
      }
      @include border-1px(#{$base-e5e5e5})
    }
    &-footer {
      width: 100%;
      font-size: 36px;
      color: $base-ff6c00;
      line-height: 120px;
      height: 120px;
      text-align: center;
      ul {
        display: flex;
        li {
          flex: 0 1 50%;
        }
        li:nth-child(1) {
          color: $base-ff6c00;
        }
        li:nth-child(2) {
          flex: 0 1 0;
          @include vertical-1px(#{$base-e5e5e5})
        }
      }
    }
  }
</style>
